<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>5. Nested Controllers</title>
        <script src="../../angular.js" charset="utf-8"></script>
        <script src="script.js"></script>
        <!-- http://www.angularjshub.com/examples/basics/nestedcontrollers/ -->
    </head>
    <body ng-app="mainApp">
        <p>
            <h2>Nested controllers with model variables defined directly on the scopes.</h2>
            (typing on an input field, with a data binding to the model, overrides the same variable of a parent scope)
        </p>
        <div ng-controller="firstControllerScope">
            <h3>First controller</h3>
            <strong>First name: </strong> {{ firstName }} <br>
            <br>
            <label>Set the first name: <input type="text" ng-model="firstName"></label> <br>
            <br>
            <div ng-controller="secondControllerScope">
                <h3>Second controller (inside First)</h3>
                <strong>First name (from First): </strong> {{ firstName }} <br>
                <strong>Last name (new variable): </strong> {{ lastName }} <br />
                <strong>Full name: </strong> {{ getFullName() }} <br>
                <br>
                <label>Set the first name: <input type="text" ng-model="firstName"></label> <br>
                <label>Set the last name: <input type="text" ng-model="lastName"></label><br>
                <br>
                <div ng-controller="thirdControllerScope">
                    <h3>Third controller (inside Second and First)</h3>
                    <strong>First name (from First): </strong>
                </div>
            </div>
        </div>
    </body>
</html>
